<template>
  <view class="content">
    <view class="title">将以下藏品转赠给好友</view>

    <view class="record" v-if="!is_many">
      <image
        class="record_image"
        :src="productDetail_product_snap.cover"
      ></image>

      <view class="record_content">
        <view class="record_content_title">{{
          productDetail_product_snap.name
        }}</view>
        <view class="record_content_second">
          <image
            class="record_content_avatar"
            :src="productDetail_product_snap.creator_avatar"
          ></image>

          <view class="record_content_username">{{
            productDetail_product_snap.creator_name
          }}</view>
        </view>

        <!-- <view class="record_content_third">
          <view class="record_content_price">¥ 999</view>

          <view class="record_content_status" v-if="item.pay_status == 1"
            >待付款</view
          >
          <view class="record_content_status" v-else-if="item.pay_status == 2"
            >交易成功</view
          >
          <view class="record_content_status" v-else-if="item.pay_status == 4"
            >已取消</view
          >
        </view> -->

        <view class="record_content_CollectionCode">
          <image
            class="record_content_CollectionIcon"
            src="../../static/collect_icon.png"
          ></image>

          <view class="record_content_no">{{ wholeid.no }}</view>
        </view>
      </view>
    </view>

    <view class="record" v-else v-for="(item, index) in computed_many_arr">
      <image
        class="record_image"
        :src="item.product_snap.cover"
      ></image>

      <view class="record_content">
        <view class="record_content_title">{{
          item.product_snap.name
        }}</view>
        <view class="record_content_second">
          <image
            class="record_content_avatar"
            :src="item.product_snap.creator_avatar"
          ></image>

          <view class="record_content_username">{{
            item.product_snap.creator_name
          }}</view>
        </view>

        <!-- <view class="record_content_third">
          <view class="record_content_price">¥ 999</view>

          <view class="record_content_status" v-if="item.pay_status == 1"
            >待付款</view
          >
          <view class="record_content_status" v-else-if="item.pay_status == 2"
            >交易成功</view
          >
          <view class="record_content_status" v-else-if="item.pay_status == 4"
            >已取消</view
          >
        </view> -->

        <view class="record_content_CollectionCode">
          <image
            class="record_content_CollectionIcon"
            src="../../static/collect_icon.png"
          ></image>

          <view class="record_content_no">{{ item.no }}</view>
        </view>
      </view>
    </view>

    <view class="expand" v-if="!is_expand && is_many" @click="is_expand = true">
      <view class="expand_text">展开</view>
      <image
        class="expand_image"
        src="../../static/expand.png"
      ></image>
    </view>
    <view class="expand" v-else-if="is_many" @click="is_expand = false">
      <view class="expand_text">收起</view>
      <image
        class="expand_image"
        src="../../static/expand2.png"
      ></image>
    </view>

    <view class="title2">请输入好友的区块链地址/手机号：</view>

    <!-- <view class="textarea">
      <u-input
        v-model="address_phone"
        type="textarea"
        :border="true"
        :height="180"
        :auto-height="true"
        :placeholder="placeholder"
        border-color="#1C1E27"
        placeholder-style="color: #999999;"
      />
    </view> -->

    <view class="textarea">
      <textarea
        class="input_center"
        type="textarea"
        v-model="address_phone"
        placeholder="请输入好友的区块链地址/手机号"
        style="font-size: 28rpx; height: 150rpx"
        placeholder-style="font-size:28rpx"
      />
    </view>

    <!-- <view class="buttons" v-if="this.wholeid.cooling_time != 0">
      <u-count-down
        :timestamp="this.wholeid.cooling_time"
        separator="colon"
        separator-color="#ffffff"
        :show-days="false"
        separator-size="28"
        font-size="28"
        @end="end()"
        color="#ffffff"
        :show-border="false"
        bg-color="#606060"
      ></u-count-down>
    </view>
    <view class="button" @click="handlePassOn" v-else>确认转赠</view> -->

    <view class="button" @click="handlePassOn">确认转赠</view>

    <view class="detail">
      <view class="detail_title">转赠说明</view>
      <view class="detail_row">
        1、请您确认您具备赠送数字藏品的民事行为能力;</br>
        2、请您确认您与受赠人均已通过平台的实名认证并遵守相关法律法规及平台协议;</br>
        3、请您确认本次赠送行为未设定任何形式的对价;</br>
        4、转赠操作无法撤销;</br>
        5、与数字藏品相关的权利将会同步且毫无保留地转移至受赠人</br>
      </view>

      <u-popup
        v-model="Transaction"
        mode="center"
        width="490rpx"
        height="290rpx"
        :border-radius="24"
        :closeable="true"
        :mask-close-able="false"
      >
        <view class="Transaction_eject">
          <text class="Transaction_top">输入交易密码</text>
          <input
            type="password"
            value=""
            class="Transaction_center"
            v-model="jypassword"
          />
          <text class="Transaction_bottom" @click="password">确定</text>
        </view>
      </u-popup>
    </view>
  </view>
</template>

<script>
import api from "@/api/api.js";
import tip from "@/utils/tip.js";
import { isLogin } from "@/utils/auth.js";
import Navbar from "@/components/Navbar/index.vue";
export default {
  components: {
    Navbar,
  },
  data() {
    return {
      state: false,
      user_product_id: "",
      is_cert: "",
      productDetail: null,
      productDetail_product_snap: null,

      address_phone: "",
      placeholder: "请输入好友的区块链地址/手机号",
      Transaction: false,
      jypassword: "",
      jystate: false,
      wholeid: "",
      is_many: false,
      many_arr: [],
      is_expand: false,
    };
  },
  computed: {
    computed_many_arr() {
      if (!this.is_expand) {
        return [this.many_arr[0]];
      } else {
        return this.many_arr;
      }
    },
  },
  onLoad(options) {
    this.is_many = options.is_many ? options.is_many : false;
    if (this.is_many) {
      this.many_arr = uni.getStorageSync("ManyCollection") || [];
      console.log("---", this.many_arr);
      return;
    }
    // this.user_product_id = options.user_product_id || "";
    // this.is_cert = options.is_cert || "";

    // let windowElement = uni.getSystemInfoSync();
    // this.widHeigh = windowElement.windowHeight;

    // console.log(options,'options')

    //  let optionnew  = JSON.parse(options.user_product_id)
    //  console.log(optionnew,'optionnew')
    //  this.wholeid = optionnew
    //  this.productDetail_product_snap = JSON.parse(optionnew.product_snap)

    this.wholeid = JSON.parse(uni.getStorageSync("productDetail"));
    this.productDetail_product_snap = JSON.parse(
      JSON.parse(uni.getStorageSync("productDetail")).product_snap
    );
  },
  onShow() {
    // this.getUserProductDetail();
  },
  methods: {
    end() {
      this.wholeid.cooling_time = 0;
    },
    password() {
      if (this.jypassword == "") {
        tip.defaults("请输入交易密码");
      } else {
        this.Transaction = false;
        this.jystate = true;
        this.handlePassOn();
      }
    },
    async getUserProductDetail() {
      let res = await api.userProductDetail({
        method: "get",
        query: {
          user_product_id: this.user_product_id,
          is_cert: this.is_cert,
        },
      });

      if (res.code === 0) {
        this.productDetail = res.data;
        this.productDetail_product_snap = JSON.parse(res.data.product_snap);
        this.state = true;
      } else {
        tip.defaults(res.msg);
      }
    },

    async handlePassOn() {
      if (this.is_many) {
        console.log("----批量转赠");
      }
      if (!this.address_phone) {
        tip.defaults("请先填写手机号/地址");
        return;
      }
      if (!this.jystate) {
        this.Transaction = true;
        return;
      }

      let ids = [];
      if (this.is_many) {
        ids = this.many_arr.map((x) => x.id);
      } else {
        ids.push(this.wholeid.id)
      }

      let res = await api.passOn({
        method: "post",
        query: {
          user_product_ids: ids,
          to: this.address_phone,
          operation_password: this.jypassword,
        },
        loading: "加载中",
      });

      // let res;
      // if (this.is_many) {
      //   let ids = this.many_arr.map((x) => x.id);

      //   res = await api.manyPassOn({
      //     method: "post",
      //     query: {
      //       user_product_ids: ids,
      //       to: this.address_phone,
      //       operation_password: this.jypassword,
      //     },
      //     loading: "加载中",
      //   });
      // } else {
      //   res = await api.passOn({
      //     method: "post",
      //     query: {
      //       user_product_id: this.wholeid.id,
      //       to: this.address_phone,
      //       operation_password: this.jypassword,
      //     },
      //     loading: "加载中",
      //   });
      // }

      if (res.code === 0) {
        tip.defaults("转赠成功");

        let res = await api.info({});
        uni.setStorageSync("userInfo", res.data);

        setTimeout(() => {
          uni.navigateBack({
            delta: 2,
          });
        }, 1000);
      } else {
        this.jypassword = "";
        this.jystate = false;
        tip.defaults(res.msg);
      }
    },
  },
};
</script>

<style lang="scss" scoped>
@import "../../style/yuanchuang.scss";
.content {
  font-family: PingFangSC-Regular, PingFang SC;
  padding: 30rpx 30rpx 100rpx 30rpx;
  background: $bg-color1;

  min-height: 100vh;
}
.title {
  height: 40rpx;
  font-size: 28rpx;
  font-weight: 400;
  color: #ffffff;
  line-height: 40rpx;
}
.record {
  margin-top: 30rpx;
  display: flex;
  align-items: center;
  width: 690rpx;
  height: 242rpx;
  border-radius: 24rpx;

  background-image: url(../../static/transaction_record_bg.png);
  background-repeat: no-repeat;
  background-size: 100% 242rpx;
  &_image {
    width: 242rpx;
    height: 242rpx;
    border-radius: 24rpx;
  }
  &_content {
    flex: 1;
    padding: 30rpx;
    &_title {
      height: 44rpx;
      font-size: 32rpx;
      font-weight: 500;
      color: #ffffff;
      line-height: 44rpx;
      // overflow: hidden;
      // -webkit-line-clamp: 1;
      // text-overflow: ellipsis;
      // display: -webkit-box;
      // -webkit-box-orient: vertical;

      width: 380rpx;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    &_second {
      margin-top: 20rpx;
      display: flex;
      align-items: center;
    }
    &_avatar {
      width: 36rpx;
      height: 36rpx;
      border-radius: 50%;
    }
    &_username {
      margin-left: 8rpx;
      height: 36rpx;
      font-size: 26rpx;
      font-weight: 500;
      color: #ffffff;
      line-height: 36rpx;

      width: 330rpx;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    &_third {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-top: 40rpx;
    }
    &_price {
      height: 42rpx;
      font-size: 36rpx;
      font-family: SFPro-Bold, SFPro;
      font-weight: bold;
      color: #ffffff;
      line-height: 42rpx;
    }
    &_status {
      height: 34rpx;
      font-size: 24rpx;
      font-weight: 400;
      color: #f78623;
      line-height: 34rpx;
    }
    &_CollectionCode {
      padding: 0 30rpx;
      display: inline-block;

      margin-top: 40rpx;
      position: relative;
      left: 16rpx;
      // width: 330rpx;
      height: 34rpx;
      color: $text-color4;
      background: $gradient1;
      // background-repeat: no-repeat;
      // background-size: 100%;
      border-radius: 18rpx;

      font-size: 24rpx;
      font-weight: 400;
      line-height: 34rpx;
      text-align: center;
    }
    &_CollectionIcon {
      position: absolute;
      top: -10rpx;
      left: -26rpx;
      width: 52rpx;
      height: 52rpx;
    }
    &_no {
      max-width: 330rpx;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }
}
.expand {
  margin: 20rpx auto 30rpx;
  padding: 0 30rpx;
  width: 136rpx;
  height: 54rpx;
  border-radius: 27rpx;
  border: 2rpx solid #cccccc;
  display: flex;
  align-items: center;
  &_text {
    width: 48rpx;
    height: 34rpx;
    font-size: 24rpx;
    font-weight: 400;
    color: #999999;
    line-height: 34rpx;
  }
  &_image {
    margin-left: 6rpx;
    width: 22rpx;
    height: 22rpx;
  }
}
.title2 {
  margin-top: 40rpx;
  height: 40rpx;
  font-size: 28rpx;
  font-weight: 400;
  color: #ffffff;
  line-height: 40rpx;
}
.textarea {
  margin-top: 30rpx;
  border: 2rpx solid #1c1e27;
  background-color: $bg-color3;
  border-radius: 24rpx;
}
.button {
  margin-top: 50rpx;
  width: 690rpx;
  height: 90rpx;
  border-radius: 16rpx;

  font-size: 32rpx;
  font-weight: 400;
  line-height: 90rpx;
  text-align: center;
  color: $text-color4;
  background: $button;
  background-repeat: no-repeat;
  background-size: 100%;
}
.buttons {
  margin-top: 50rpx;
  width: 690rpx;
  height: 90rpx;
  background: #606060;
  border-radius: 16rpx;

  font-size: 32rpx;
  font-weight: 400;
  color: #ffffff;
  line-height: 90rpx;
  text-align: center;
}
.detail {
  margin-top: 70rpx;
  &_title {
    font-size: 28rpx;
    font-weight: 400;
    color: #ffffff;
    line-height: 40rpx;
  }
  &_row {
    margin-top: 30rpx;
    font-size: 28rpx;
    font-weight: 400;
    color: #bbbbbe;
    line-height: 40rpx;
    white-space: break-spaces;
  }
  &_row + &_row {
    margin-top: 20rpx;
  }
}
.input_center {
  color: #ffffff;
  // height: 260rpx;
  // padding: 30rpx 0 0rpx;
  word-break: break-all;
  margin: 30rpx;
  max-height: 300rpx;
}
.Transaction_eject {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  height: 290rpx;
  background-color: $bg-color1;
  .Transaction_top {
    margin-top: 50rpx;
    font-size: 32rpx;
    color: $text-color1;
  }
  .Transaction_center {
    padding: 0 20rpx;
    border: 2rpx solid #262934;
    background: $bg-color3;
    border-radius: 16rpx;
    height: 85rpx;
    width: 80%;
    color: #ffffff;
  }
  .Transaction_bottom {
    font-size: 32rpx;
    color: $text-color1;
    margin-bottom: 30rpx;
  }
}
</style>